<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .title-item {
            font-size: 30px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div id="app"></div>
<!--引入react核心库-->
<script src="../React-js/react.development.js"></script>
<!--引入reac-dom 用于支持react操作dom-->
<script src="../React-js/react-dom.development.js"></script>
<!--显示props数据类型显示-->
<script src="../React-js/prop-types.js"></script>

<!--引入babel 用于讲jsx语法转js语法-->
<script src="../React-js/babel.min.js"></script>
<script type="text/babel">/*此处一定要写text/babel  使用babel解析*/

const num = 0

//创建虚拟dom
class DayStatus extends React.Component {
    //显示参数类型

    render() {
        //传来函数 就执行回调
        return (
            <div>
                <ul>
                    <li>名称：{this.props.name}</li>
                    <li>年龄：{this.props.age}</li>
                    <li>性别：{this.props.sex}</li>
                </ul>
            </div>
        )

    }

    /**
     * 点击事件
     */
    updateStatus() {
        this.setState({
            isHot: !this.state.isHot //修改状态
        })
    }
}

//限制props数据类型
DayStatus.propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number.isRequired,
}
//设置props默认
DayStatus.defaultProps = {
    sex: '女',
}
const userList = [
    {name: '小明', age: 18, sex: '男'},
    {name: '小红', age: 19, sex: '女'},
    {name: '小明2', age: 18, sex: '男'},
    {name: '小明3', age: 18, sex: '男'},
    {name: '小明4', age: 18, sex: '男'},
    {name: '小明5', age: 18, sex: '男'},
    {name: '小明6', age: 18, sex: '男'},
]
const htmlList = <div>
    {
        userList.map((item, index) => {
            //{...item} 批量属性传递
            return <DayStatus key={index} {...item} />
        })
    }
</div>



//渲染虚拟dom到页面
ReactDOM.render(<div>{htmlList} <DayStatus name="小明7" age={18} />
</div>, document.getElementById('app'))
</script>
</body>
</html>